<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户管理</title>
    <!-- 公共CSS,JS文件 -->
    <#include "/admin/common/header.html"/>
</head>
<body class="with-padding">
<div class="container-fixed-md">
    <!-- 顶部导航 -->
    <#include "/admin/common/nav-admin.html"/>
    <!-- 左右侧导航 -->
    <div class="row">
        <!-- 左侧导航 -->
        <#include "/admin/common/left-nav-admin.html"/>
        <!-- 右侧导航 -->
        <div class="col-xs-12 col-sm-6 col-md-10">
            <div class="panel">
                <div class="panel-heading">
                    用户管理
                </div>
                <div class="panel-body">
                    <div class="row">
                        <!-- 搜索框 -->
                        <form action="/admin/user/list" method="post">
                            <div class="col-xs-3">
                                <input type="text" name="userName" value="${userName!}" class="form-control" placeholder="用户名、手机号、邮箱">
                            </div>
                            <div class="col-xs-2">
                                <button class="btn btn-primary" type="submit">搜索</button>
                            </div>
                        </form>
                    </div>
                    <!-- 对话框HTML -->
                    <div class="modal fade" id="myModal">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <form id="infoFrom" class="form-horizontal" data-toggle="validator">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                                        <h4 class="modal-title">新增用户</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div class="form-group">
                                            <label for="userName" class="col-sm-2 required">用户名</label>
                                            <div class="col-md-6 col-sm-10">
                                                <input type="text" class="form-control" id="userName" name="userName" placeholder="用户名称">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="phone" class="col-sm-2 required">手机号</label>
                                            <div class="col-md-6 col-sm-10">
                                                <input type="text" class="form-control" id="phone" name="phone" placeholder="手机号">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="email" class="col-sm-2 required">邮箱</label>
                                            <div class="col-md-6 col-sm-10">
                                                <input type="email" class="form-control" id="email" name="email" placeholder="邮箱">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="sex" class="col-sm-2 required">性别</label>
                                            <div class="col-md-6 col-sm-10 radio">
                                                <label>
                                                    <input type="radio" id=“sex” name="sex" checked="checked"> 男
                                                </label>
                                                <label>
                                                    <input type="radio" id="sex" name="sex"> 女
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                        <button type="submit" class="btn btn-primary">保存</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <div id="toolbar" class="toolbox btn-group">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"><i class="icon icon-plus"></i> 添加</button>
                        <!--<button class="btn btn-link" onclick="add()"><i class="icon icon-plus"></i> 添加</button>-->
                        <button class="btn btn-success" onclick="update()"><i class="icon icon-edit"></i> 修改</button>
                        <button class="btn btn-danger" onclick="del()"><i class="icon icon-times"></i> 删除</button>
                    </div>
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>编号</th>
                                <th>用户名</th>
                                <th>手机号</th>
                                <th>邮箱</th>
                                <th>创建时间</th>
                                <th>修改时间</th>
                            </tr>
                        </thead>
                        <tbody>
                        <#if page.list??>
                            <#list page.list as userVo>
                                <tr>
                                    <th>${userVo.id!}</th>
                                    <th>${userVo.userName!}</th>
                                    <th>${userVo.phone!}</th>
                                    <th>${userVo.email!}</th>
                                    <th>${userVo.tsInsert!}</th>
                                    <th>${userVo.tsUpdate!}</th>
                                </tr>
                            </#list>
                        </#if>
                        </tbody>
                    </table>
                    <!-- 分页 start -->
                    <div class="message">
                        共<i class="blue">${page.total}</i>条记录，当前显示第 <i class="blue">${page.pageNum}/${page.pages}</i> 页
                    </div>
                    <div style="text-align:center;">
                        <ul class="pager pager-pills">
                            <#if !page.isFirstPage >
                                <li><a href="javascript:queryAll(${page.firstPage}, ${page.pageSize});"><<</a></li>
                                <li><a href="javascript:queryAll(${page.prePage}, ${page.pageSize});"><</a></li>
                            </#if>
                            <#list page.navigatepageNums as navigatepageNum>
                                <#if navigatepageNum==page.pageNum>
                                    <li class="active"><a href="javascript:queryAll(${navigatepageNum}, ${page.pageSize});">${navigatepageNum}</a></li>
                                </#if>
                                <#if navigatepageNum!=page.pageNum>
                                    <li><a href="javascript:queryAll(${navigatepageNum}, ${page.pageSize});">${navigatepageNum}</a></li>
                                </#if>
                            </#list>
                            <#if !page.isLastPage>
                                <li><a href="javascript:queryAll(${page.nextPage}, ${page.pageSize});">></a></li>
                                <li><a href="javascript:queryAll(${page.lastPage}, ${page.pageSize});">>></a></li>
                            </#if>
                        </ul>
                    </div>
                    <!-- 分页 end -->
                </div>
            </div>
        </div>
    </div>
</div>
<#include "/admin/common/footer.html"/>
<!-- 分页js start -->
<script>
    function queryAll(pageNum, pageSize){
        var userName = $("input[name='userName']").val();
        if (userName != null && userName != "") {
            document.location.href="/admin/user/list?pageNum="+pageNum+"&userName="+userName;
        } else {
            document.location.href="/admin/user/list?pageNum="+pageNum;
        }
    }
</script>
<!-- 分页 js end -->
</body>
</html>